<template>
  <div class="member-container">
    <el-table :data="memberList" style="width: 100%">
      <el-table-column prop="userName" label="成员">
        <template #default="{row}">
          <div class="member-info">
            <el-avatar :size="36" :src="row.avatar"></el-avatar>
            <div class="member-name">
              <div>{{ row.userName }}</div>
              <div class="member-id">ID: {{ row.userId }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="role" label="角色" width="120">
        <template #default="{row}">
          <el-tag :type="row.role === 1 ? 'danger' : row.role === 2 ? 'warning' : ''">
            {{ formatRole(row.role) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="subgroupNames" label="分组" width="200">
        <template #default="{row}">
          <div class="subgroups">
            <el-tag
              v-for="group in row.subgroupNames"
              :key="group"
              size="mini"
              type="info">
              {{ group }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getGroupMembers } from '@/api/exam/sudentGroupDetail'

export default {
  name: 'StudentMemberTab',
  props: {
    groupId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      memberList: [],
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      // 模拟数据 - 实际项目中替换为API调用
      // this.memberList = this.mockLoadExamList()
      // this.total = this.memberList.length

      // 实际API调用
      getGroupMembers(this.groupId, this.queryParams).then(response => {
        this.memberList = response.rows
        this.total = response.total
      })
    },
    formatRole(role) {
      return ['', '主要负责人', '次要负责人', '考生'][role] || ''
    },
    mockLoadExamList() {
      return [
        {
          userId: 1001,
          userName: '张老师',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          role: 1,
          subgroupNames: []
        },
        {
          userId: 1002,
          userName: '李老师',
          avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
          role: 2,
          subgroupNames: []
        },
        {
          userId: 2001,
          userName: '王同学',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          role: 3,
          subgroupNames: ['第一组', '实验组']
        },
        {
          userId: 2002,
          userName: '赵同学',
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
          role: 3,
          subgroupNames: ['第一组']
        }
      ]
    }
  }
}
</script>

<style scoped>
.member-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.member-info {
  display: flex;
  align-items: center;
}

.member-name {
  margin-left: 10px;
}

.member-id {
  font-size: 12px;
  color: #909399;
}

.subgroups .el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
